<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>GIMC</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/rem.js"></script>
		<link rel="stylesheet" type="text/css" href="css/essay.css"/>
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
	</head>
	<body>
		<!--首页-->
		<div class="article">
			<header>
				<div class="article_menu">
					<i class="iconfont icon-ego-menu"></i>
				</div>
				<div class="article_logo">
					<img src="img/logo.png"/>
				</div>
				<div class="article_serve">
					<i class="iconfont icon-sousuo"></i>
				</div>
			</header>
			
			<!--内容-->
			<section class="article_content">
				<!--轮播图-->
				<div class="carousel">
					<div class="carousel_see">
						<ul class="pic_box">
							<li>
								<img src="img/carousel.jpg"/>
								<div class="carousel_content">
									<p class="con_desc">省广股份携手阿里妈妈举行DT大时代 全息营销......</p>
									<div class="con_date">
										<div class="con_see">
											<i class="iconfont icon-xin">120</i>
											<i class="iconfont icon-yj">560</i>
										</div>
										<p class="date">12月26日07:33:43</p>
									</div>
								</div>
							</li>
							<li>
								<img src="img/carousel.jpg"/>
								<div class="carousel_content">
									<p class="con_desc">省广股份携手阿里妈妈举行DT大时代 全息营销......</p>
									<div class="con_date">
										<div class="con_see">
											<i class="iconfont icon-xin">120</i>
											<i class="iconfont icon-yj">560</i>
										</div>
										<p class="date">12月26日07:33:43</p>
									</div>
								</div>
							</li>
							<li>
								<img src="img/carousel.jpg"/>
							</li>
						</ul>
						<ul class="pannel">
						</ul>
					</div>
				</div>
				
				<!--内容-->
				<div class="essay_content">
					<ul class="essay_list">
						<li class="essay_frame eassay_touch">
							<div class="essay_pic">
								<img src="img/essay_pic.jpg"/>
							</div>
							<p class="essay_desc">海天“晒“宴，和汪涵一起，参观海天酱油......</p>
							<div class="essay_sell">
								<h4>营销</h4>
								<span>
									<i class="iconfont icon-xin">120</i>
									<i class="iconfont icon-yj">560</i>
								</span>
							</div>
							<div class="essay_time">
								<div class="essay_portrait">
									<img src="img/sign_pic.jpg"/>
								</div>
								<p>叶巧岚</p>
								<span>2015年1月20日</span>
							</div>
						</li>
						<li class="essay_frame">
							<div class="essay_pic">
								<img src="img/essay_pic.jpg"/>
							</div>
							<p class="essay_desc">海天“晒“宴，和汪涵一起，参观海天酱油......</p>
							<div class="essay_sell">
								<h4>营销</h4>
								<span>
									<i class="iconfont icon-xin">120</i>
									<i class="iconfont icon-yj">560</i>
								</span>
							</div>
							<div class="essay_time">
								<div class="essay_portrait">
									<img src="img/sign_pic.jpg"/>
								</div>
								<p>叶巧岚</p>
								<span>2015年1月20日</span>
							</div>
						</li>
						<li class="essay_frame">
							<div class="essay_pic">
								<img src="img/essay_pic.jpg"/>
							</div>
							<p class="essay_desc">海天“晒“宴，和汪涵一起，参观海天酱油......</p>
							<div class="essay_sell">
								<h4>营销</h4>
								<span>
									<i class="iconfont icon-xin">120</i>
									<i class="iconfont icon-yj">560</i>
								</span>
							</div>
							<div class="essay_time">
								<div class="essay_portrait">
									<img src="img/sign_pic.jpg"/>
								</div>
								<p>叶巧岚</p>
								<span>2015年1月20日</span>
							</div>
						</li>
						<li class="essay_frame">
							<div class="essay_pic">
								<img src="img/essay_pic.jpg"/>
							</div>
							<p class="essay_desc">海天“晒“宴，和汪涵一起，参观海天酱油......</p>
							<div class="essay_sell">
								<h4>营销</h4>
								<span>
									<i class="iconfont icon-xin">120</i>
									<i class="iconfont icon-yj">560</i>
								</span>
							</div>
							<div class="essay_time">
								<div class="essay_portrait">
									<img src="img/sign_pic.jpg"/>
								</div>
								<p>叶巧岚</p>
								<span>2015年1月20日</span>
							</div>
						</li>
						<li class="essay_frame">
							<div class="essay_pic">
								<img src="img/essay_pic.jpg"/>
							</div>
							<p class="essay_desc">海天“晒“宴，和汪涵一起，参观海天酱油......</p>
							<div class="essay_sell">
								<h4>营销</h4>
								<span>
									<i class="iconfont icon-xin">120</i>
									<i class="iconfont icon-yj">560</i>
								</span>
							</div>
							<div class="essay_time">
								<div class="essay_portrait">
									<img src="img/sign_pic.jpg"/>
								</div>
								<p>叶巧岚</p>
								<span>2015年1月20日</span>
							</div>
						</li>
						<li class="essay_frame">
							<div class="essay_pic">
								<img src="img/essay_pic.jpg"/>
							</div>
							<p class="essay_desc">海天“晒“宴，和汪涵一起，参观海天酱油......</p>
							<div class="essay_sell">
								<h4>营销</h4>
								<span>
									<i class="iconfont icon-xin">120</i>
									<i class="iconfont icon-yj">560</i>
								</span>
							</div>
							<div class="essay_time">
								<div class="essay_portrait">
									<img src="img/sign_pic.jpg"/>
								</div>
								<p>叶巧岚</p>
								<span>2015年1月20日</span>
							</div>
						</li>
					</ul>
				</div>
				<div class="load_more">加载更多</div>
				
				<!--详情页-->
				<div class="article_details">
					<div class="details_frame">
						<h1>海天"晒"宴，和汪涵一起，参观海天酱油阳光工厂</h1>
						<div class="details_watch">
							<i class="iconfont icon-xin">20</i>
							<i class="iconfont icon-yj">560</i>
						</div>
						<p class="digital_marketing">
							2015-1-20<span>[数字营销]</span>
						</p>
						<div class="details_content">
							<p>摘要：“海天阳光之旅”，携手汪涵启程啦！ 幸运的你，将与汪涵近距离互动，一起参观海天酱油阳光工厂，探秘超大规模调味王国！三天两夜免费体验岭南风情，夜游珠江登高小蛮腰，畅游长隆品粤式美食！还等什么？赶快参与互动，报名参加“海天阳光之旅”吧！</p>
							<h5>互联网呈现移动化、社交化、视频化等形式，未来互联网营销是新向。</h5>
							<p>与此同时，随着互联网的移动化快速发展与社会化趋势，网民需求正在逐渐多样化。在这一前提下，无论是互联网巨头还是各种创新型互联网企业，单凭自身的资源与创新能力已经无法满足依赖移动互联网平台，表达形式日渐多样化的网民日益多元化的需求。有鉴于此，海天在2014年开始大力发展互联网营销事业，试图在互联网抢夺更多的用户。</p>
							<h5>剑指对手，紧追猛打—海天酱油抢回“晒”语权</h5>
							<p>直接剑指对手，打出新口号，紧追猛打。针对对手的产品口号，2014年海天酱油新定位—晒出来的好酱油，不仅晒足180天哦！在对手已经教育消费者，好酱油是晒出来的层面上，继续强势教育消费者，其实好酱油不止晒足180天，进一步加深消费者的印象，强势植入品牌概念。希望在新的领域抢夺更多的用户，挖掘更多的潜在受众。</p>
							<div>
								<img src="img/essay_03.jpg"/>
							</div>
							<h5>全网覆盖，最大声量--海天在新阵地上刷新年轻新象</h5>
							<p>互联网一直是年轻人的聚集地，想要扩大活动声量<br />
	结合人群属性和触媒习惯，选择在互联网作为主阵地，最大力度地扩散活动的影响力，聚焦主流平台及优势资源，引爆海天在互 联网上的传播力，为品牌活动引流。
							</p>
							<p>四大门户媒体：品牌及活动主力支撑平台，为品牌做公关护航</p>
							<p>四大视频媒体：品牌TVC补充曝光，为活动引流助力社会化媒体自发扩散，通过大量转发，促进二次传播。</p>
							<div><img src="img/essay_07.jpg"/></div>
							<h5>策略方向</h5>
							<p>点面结合，互动为王</p>
							<h5>点</h5>
							<p>紧贴明星汪涵话题点，借助汪涵的明星效应，紧跟工厂游社会热点，通过参观工厂，探秘工厂内部制作酱油的全过程紧抓网友利益点：设置互动活动奖励机制，刺激网友参加</p>
							<h5>面</h5>
							<p>媒介公关全面造势：全方位扩散“海天阳光之旅”的活动精准视频渗透：重点推广品牌TVC，继续借助明星效应社会化口碑广泛积累：通过口口相传的口碑营销，为活动积累人气</p>
							<div><img src="img/essay_a.jpg"/></div>
							<h5>活动简介：</h5>
							<p>“海天阳光之旅”，携手汪涵启程啦！</p>
							<p>幸运的你，将与汪涵近距离互动，一起参观海天酱油阳光工厂，探秘超大规模调味王国！三天两夜免费体验岭南风情，夜游珠江登高小蛮腰，畅游长隆品粤式美食！还等什么？赶快参与互动，报名参加“海天阳光之旅”吧！</p>
							<h5>活动时间：</h5>
							<p>2014年9月15日—2014年10月30日</p>
							<p>多版活动素材，增强活动新鲜感，提升网民参与热度！
		分为不同的时期，分别推出不同的网站页面，通过分阶段的视觉冲击，增加活动的趣味性，吸引更多的网友持续关注活动，为活动打造更强的互动体验。</p>
							<div><img src="img/essay_10.jpg"/></div>
							<p>趣味化广告 + 晒酱油视频 + 利益性抽奖,引爆全网最大化传播！借助汪涵的名人效应，不断地播放品牌TVC，强势教育消费者设置不同的奖项，刺激消费者带动更多的人参与活动，引发全网最大化传播</p>
							<div><img src="img/essay_14.jpg"/></div>
							<p>截止10月13日，参与活动人数已达157万，海天引发全网互动狂潮！撬动网民内心支点奖品派不停！参与人数持续升高！</p>
							<p>20元红包1000份，共计2万元</p>
							<p>50元红包500份，共计2万5千元</p>
							<p>合计已派发红包1500份！</p>
							<div><img src="img/essay_17.jpg"/></div>
							<p>总的来说，“阳光海天之旅”，集中资源，全网传播，互动效果明显，社会化传播上好评如潮对比厨邦酱油、李锦记，海天酱油在百度指数上遥遥领先，成功建立竞争壁垒！</p>
							<div><img src="img/essay_b.jpg"/></div>
						</div>
					</div>
					<p class="next_previous">
						<span>上一篇：</span>
						Flyme的新Logo也一同亮相
					</p>
					<div class="comment_area">
						<ul class="essay_collect">
							<li>
								<i class="iconfont icon-xin"></i>
								<p>点赞</p>
							</li>
							<li>
								<i class="iconfont icon-xingxing"></i>
								<p>收藏</p>
							</li>
							<li>
								<i class="iconfont icon-fenxiang"></i>
								<p>分享</p>
							</li>
						</ul>
						<div class="text_area">
							<span>登录</span>
							后参与评论
						</div>
						<div class="essay_comment">
							发表评论
						</div>
						<p class="comment_quantity">
							已有<span>3</span>条评论
						</p>
						<ul class="comment_list">
							<li class="com_li_con">
								<div class="user_message">
									<div>
										<img src="img/sign_pic.jpg"/>
									</div>
									<p>yanxinheng</p>
									<span>1天前</span>
								</div>
								<div class="user_com_con">
									<p>在这个互相仇恨的年代，抓的点不错</p>
									<span>2015-11-8 11:04</span>
								</div>
								<div class="reply_touch">
									<p id="com_open">(2) 回复 <span class="trans_roate">></span></p>
								</div>
								<div class="reply_content">
									<ul class="reply_list">
										<li>
											<div class="user_reply">
												<div>
													<img src="img/sign_pic.jpg"/>
												</div>
												<span>asdasd:</span>
												<p>越来越多的快餐品牌更注重人们吃东西</p>
											</div>
											<p class="user_reply_date">2015-11-9 10:02</p>
										</li>
										<li>
											<div class="user_reply">
												<div>
													<img src="img/sign_pic.jpg"/>
												</div>
												<span>asdadsadd:</span>
												<p>越来越多的快餐品牌更注重人们吃东西时候玩手机的行为洞察</p>
											</div>
											<p class="user_reply_date">2015-11-9 10:02</p>
										</li>
									</ul>
									<form action="" method="post">
										<div class="text_frame">
											<textarea name="" rows="" cols=""></textarea>
										</div>
										<input type="button" id="" value="发表" />
									</form>
									
								</div>
							</li>
							<li class="com_li_con">
								<div class="user_message">
									<div>
										<img src="img/sign_pic.jpg"/>
									</div>
									<p>yanxinheng</p>
									<span>1天前</span>
								</div>
								<div class="user_com_con">
									<p>在这个互相仇恨的年代，抓的点不错</p>
									<span>2015-11-8 11:04</span>
								</div>
								<div class="reply_touch">
									<p>回复 <span>></span></p>
								</div>
								
							</li>
						</ul>
					</div>
					<p class="load_more">加载更多</p>
				</div>
			</section>
			<!--尾部-->
			<footer>
				<a href="index.html" class="footer_nav">
					<div class="nav_photoa">
						<img src="img/nav_a.png"/>
					</div>
					<p class="nav_desc">首页</p>
				</a>
				<a href="gimc.html" class="footer_nav">
					<div class="nav_photob">
						<img src="img/nav_bb.png"/>
					</div>
					<p class="nav_desc">GIMC</p>
				</a>
				<a href="essay.html" class="footer_nav">
					<div class="nav_photoc">
						<img src="img/rnav_c.png"/>
					</div>
					<p class="nav_desc nav_active_a">文章</p>
				</a>
				<a href="resource_a.html" class="footer_nav">
					<div class="nav_photod">
						<img src="img/nav_d.png"/>
					</div>
					<p class="nav_desc">资源</p>
				</a>
				<a href="curriculum.html" class="footer_nav">
					<div class="nav_photoe">
						<img src="img/nav_e.png"/>
					</div>
					<p class="nav_desc">学院</p>
				</a>
			</footer>
			
		</div>
		
		<!--返回，分享-->
		<div class="back_share">
			<i class="iconfont icon-fanhui"></i>
			<p>海天“晒“宴</p>
			<i class="iconfont icon-fenxiang" id="shareopen"></i>
			<ul class="share_content">
				<li class="iconfont icon-weixin">微信</li>
				<li class="iconfont icon-qq">QQ</li>
				<li class="iconfont icon-xinlang">新浪</li>
			</ul>
		</div>
		
		<!--菜单页登录页-->
		<section class="register_content" >
			<div class="register_serve">
				<i id="close_a" class="iconfont icon-jiaochacross78"></i>
				<div class="serve_frame">
					<i class="iconfont icon-sousuo"></i>
					<div class="serve_in">
						<input type="search" name="" id="" placeholder="Search" />
					</div>
				</div>
			</div>
			<div class="register_select">
				<a href="" class="select_pic">
					<div class="pic_fra">
						<img src="img/serve_h.jpg"/>
					</div>
				</a>
				<a class="select_button">立即登录</a>
				<a class="forget">忘记密码</a>
			</div>
			<ul class="register_menu">
				<li class="menu_content">
					<p>GIMC</p>
					<p>></p>
				</li>
				<li class="menu_content">
					<p>文章</p>
					<p>></p>
				</li>
				<li class="menu_content">
					<p>资源</p>
					<p>></p>
				</li>
				<li class="menu_content">
					<p>课程</p>
					<p>></p>
				</li>
			</ul>
		</section>
		
		<!--输入密码-->
		<section class="enter_password">
			<div class="register_serve">
				<i class="iconfont icon-jiaochacross78" id="close_b"></i>
				<div class="serve_frame">
					<i class="iconfont icon-sousuo"></i>
					<div class="serve_in">
						<input type="search" name="" id="" placeholder="Search" />
					</div>
				</div>
			</div>
			<form action="" method="post">
				<div class="password_logo">
					<img src="img/password_logo.png"/>
				</div>
				<ul class="password_frame">
					<li class="p_frame_a p_enter_frame">
						<i class="iconfont icon-ren111"></i>
						<div>
							<input type="text" name="" id="" placeholder="请输入已验证的手机号或邮箱" />
						</div>
					</li>
					<li class="p_frame_a p_enter_frame">
						<i class="iconfont icon-026caozuo_suoding"></i>
						<div>
							<input type="password" name="" id="" placeholder="请输入密码" />
						</div>
					</li>
					<li class="p_frame_a p_forget">
						<i class="iconfont icon-wenhao">忘记密码</i>
					</li>
					<li class="p_frame_a">
						<a class="enter_color">登录</a>
					</li>
					<li class="p_frame_a">
						<a href="" class="register_color">注册</a>
					</li>
				</ul>
			</form>
		</section>
		
		<!--成功登录页-->
		<section class="signin_content">
			<div class="register_serve">
				<i class="iconfont icon-jiaochacross78" id="close_c"></i>
				<div class="serve_frame">
					<i class="iconfont icon-sousuo"></i>
					<div class="serve_in">
						<input type="search" name="" id="" placeholder="Search" />
					</div>
				</div>
			</div>
			<div class="register_select signin_select">
				<a href="" class="select_pic">
					<div class="pic_fra">
						<img src="img/sign_pic.jpg"/>
					</div>
					<span>1</span>
				</a>
				<p class="my_center">
					<span>陈小敏</span>
					<a href="">个人中心 > </a>
				</p>
				<div class="sign_star">
					<i class="iconfont icon-xingxing"></i>
					<i class="iconfont icon-xingxing"></i>
					<i class="iconfont icon-xingxing"></i>
					<i class="iconfont icon-xingxing"></i>
				</div>
				<p class="sign_fans">
					<a href="">关注<span>36</span></a>
					<a href="">粉丝<span>290</span></a>
				</p>
				<div class="my_collect">
					<a href="" class="red">我的收藏</a>
					<a href="">我的发布</a>
				</div>
			</div>
			<ul class="register_menu">
				<li class="menu_content">
					<p>GIMC</p>
					<p class="tran_roate">></p>
				</li>
				<li class="hid_content">
					<p class="bot_bor">省广介绍</p>
					<p>新闻资讯</p>
				</li>
				<li class="menu_content">
					<p>文章</p>
					<p>></p>
				</li>
				<li class="menu_content">
					<p>资源</p>
					<p>></p>
				</li>
				<li class="menu_content">
					<p>课程</p>
					<p>></p>
				</li>
			</ul>
		</section>
		
		<!--搜索框-->
		<section class="search_box" id="del_search_box">
			<div class="search_out">
				<div class="search_frame">
					<i class="iconfont icon-sousuo"></i>
					<div class="serve_in">
						<input type="search" name="" id="" placeholder="Search" />
					</div>
				</div>
				<p id="search_del">取消</p>
			</div>
			<p class="hot_search_title">热搜</p>
			<ul class="hot_search_label">
				<li>项目管理</li>
				<li>移动互联网</li>
				<li>O2O联转化</li>
				<li>O2O</li>
				<li>媒介平台</li>
				<li>细分平台业务</li>
				<li>项目管理</li>
				<li>移动互联网</li>
				<li>O2O联转化</li>
			</ul>
		</section>
	</body>
	<!--轮播图-->
	<script src="js/carousel-jq.js"></script>
	<script src="js/carousel.js"></script>
	
	<script type="text/javascript">
		new carousel(".carousel",306/640)
	</script>
	
	<!--点击事件-->
	<script src="js/touch.js"></script>
	
	<!--详情点击事件-->
	<script type="text/javascript">
		var eassaytouch = document.querySelector(".eassay_touch")
		var back = document.querySelector(".icon-fanhui")
		var backshare = document.querySelector(".back_share")
		var articledetails = document.querySelector(".article_details")
		
		var comopen = document.querySelector("#com_open")
		var replycontent = document.querySelector(".reply_content")
		var transroate = document.querySelector(".trans_roate")
		var isBlock = false;
		
			eassaytouch.addEventListener("touchend",function(){
				{
					articledetails.style.transform="translate(0,0)";
					articledetails.style.transition="all 1s";
					backshare.style.transform="translateX(0)";
				}
			})
			back.addEventListener("touchend",function(){
				{
					articledetails.style.transform="translate(-100%,-100%)";
					articledetails.style.transition="all 1s";
					backshare.style.transform="translateX(100%)";
				}
			})
			
			
			comopen.addEventListener("click",function(){
				if(!isBlock){
					replycontent.style.display="block"
					transroate.style.transform="rotatez(90deg)"
					transroate.style.transition="all 0.3s"
					isBlock = true;
				}else{
					replycontent.style.display="none"
					transroate.style.transform="rotatez(0deg)"
					isBlock=false;
				}
			})
	</script>
</html>

